import { createList } from './api'
import List from '../List'
import { memo } from 'react'

interface Props {
  query: string
}

function SearchResults({ query }: Props) {
  
  const list = createList(query)

  return (
    <List 
      list={list} 
      renderItem={(item) => (
        <Item key={item} text={item} />
      )}
    />
  )
}

function Item(props: { text: string }) {
  let startTime = performance.now();
  while (performance.now() - startTime < 1) {}

  return (
    <div>{props.text}</div>
  )
}

export default memo(SearchResults)